import React, { Component, createRef } from 'react'

// 父传子
// 第一种: 直接动态属性传值
// 第二种: 拓展 传递一个函数给子组件, 该函数有返回值, 返回值为当前父组件中的数据,
// 子组件调用返回值就是父组件中的数据
// 第三种方式: 通过在父组件中给子组件绑定ref属性, 进而获取当前子组件实例,
// 然后调用子组件实例上的方法, 将父组件中的数据以实参形式传递给子组件,子组件中的该方法接收参数,获取数据


// 引入子组件
import Son from './Son';
export default class Father extends Component {
    state = {
        userinfo: {
            name: '岳飞',
            age: 40
        }
    }
    ref1 = createRef();
    render() {
        return (
            <div>
                {/* 使用子组件 */}
                {/* <Son userinfo={this.state.userinfo}></Son> */}
                {/* 第二种: */}
                {/* <Son fathertochildFn={this.fathertochildFn}></Son> */}
                {/* 第三种 */}
                <Son ref={this.ref1}></Son>
            </div>
        )
    };
    // fathertochildFn = () => {
    //     console.log('this', this);
    //     return this.state.userinfo
    // };

    componentDidMount() {
        console.log(this.ref1); // 当前son 组件的实例对象
        this.ref1.current.myselfFn(this.state.userinfo)

    }
}
